<template>
	<div class="modal-dialog" v-if="visible">
		<div class="wraper">
			<div class="head">
				<div class="iconfont">&#xe73d;</div>
				<div class="title">{{title}}</div>
			</div>
			<div class="body">
				<div v-if="content" class="content">{{content}}</div>
				<div class="foot">
					<button class="c-btn" @click="confirmHandle">{{confirmText}}</button>
					<button class="c-btn c-btn-main" @click="visible = false">{{cancelText}}</button>
				</div>
			</div>
			<div class="iconfont del" @click="visible = false">&#xe6e9;</div>
		</div>
	</div>
</template>

<script>
	export default {
    name: "modaldialog",
		data(){
			return{
				visible: false,
				title: '',
				content: '',
				confirmText: '确认',
				cancelText: '取消',
				onConfirm: ()=>{}
			}
		},
		methods:{
			confirmHandle(){
				this.onConfirm()
				this.visible = false
			}
		}
  }
</script>

<style lang="scss">
.modal-dialog{
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(4,0,8,.8);
	z-index: 999;
	.wraper{
		width: 400px;
		background: #fff;
		border-radius: 5px;
		text-align: center;
		position: relative;
		margin-top: -60px;
	}
	.head{
		color: #fe7070;
		text-align: center;
		font-size: 16px;
		padding: 30px;
		.iconfont{
			font-size: 45px;
			margin-bottom: 5px;
		}
	}
	.body{
		padding: 30px;
		background: #f4f3f7;
		border-radius: 0 0 5px 5px;
	}
	.foot{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.c-btn{
		padding: .8em 0;
		margin: 30px 10px 0;
		background: none;
		border: solid 1px #ddd;
		color: #999;
		min-width: 40%;
		border-radius: 5px;
		cursor: pointer;
		&:hover:not(.c-btn-main){
			color: inherit;
			border-color: #ccc;
		}
	}
	.c-btn-main{
		background: #fe7070;
		color: #fff;
		border-color: #fe7070;
	}
	.content{
		opacity: 0.8;
	}
	.del{
		position: absolute;
		color: #fff;
		border: solid 1px #fff;
		display: flex;
		width: 34px;
		height: 34px;
		left: 50%;
		bottom: -80px;
		margin-left: -17px;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		font-size: 1.2em;
		opacity: .4;
		cursor: pointer;
		z-index: -1;
		&:hover{
			opacity: 1;
		}
		&::before{
			content: '';
			display: block;
			width: 1px;
			background: #fff;
			height: 50px;
			bottom: 100%;
			left: 50%;
			position: absolute;
		}
	}
}
</style>
